<div class="container" id="container">
  <div class="page article js_show">
    <div class="page__hd">
      <h1 class="page__title">组件化</h1>
      <p class="page__desc">UI的复用</p>
    </div>
    <div class="page__bd">
      <article class="weui-article">
        <h1></h1>
        <section>
          <h2 class="title"></h2>
          <section>
            <h3>组件化是UI复用的方式</h3>
            <p>
              <h4>为什么需要组件化，组件化的目标是什么？</h4>
              当我们发现Javascript代码可以通过继承和混合进行复用的时候，我们往往发现HTML是不太容易复用的。
              组件化就是为了能让UI能够被复用，让不同的人可以拥有相同的组件库是一件对公司层级都很有价值的东西，
              在不断撰写业务代码的同时积累和维护一套UI组件有利于新项目原型的快速构建。也可以避免设计师对一些基础组件
              的重复设计。
              组件化的困难在于如何让组件具有可扩展性和通用性,组件化需要在设计和管理层有一致性认可的情况下才有意义，否则
              朝令夕改的规则下，组件化的价值就微乎其微了。
            </p><p>
              <h4>添加示例网站</h4>
              如何去描述已经添加的组件是个很大的问题，往往我们添加一个组件之后再次使用的时候会忘记该如何创建控件及如何使用这个
              控件。此外，控件很可能是由不同的框架和组件构建而成，当我们的框架发生变化的时候，组件如果要继续使用就要保证组件
              自身是自给自足的，无需依赖其他资源，至少要知道需要依赖哪些资源，在新的框架版本中哪些组件可以继续使用，哪些组件
              需要引入其他资源才可以使用。
              示例网站在组件化过程中可以起到很好的作用，一个可以让我们明确看到哪些组件是可用，这些组件提供哪些方法和接口，
              这些方法和接口以直观的体现组件的功能和样式；此外，示例网站还可以在我们做一些框架层面的改动时及时对之前的组件
              进行回归，发现改动所引起的问题。
            </p><p>
              <h4>组件的选择</h4>
              组件的积累往往不是一朝一夕的事情，尤其在前端框架技术不断发展的今天，也许我们前端时间用的是jquery，后面又会使用
              react，但是很多组件的积累和重写需要时间。我们已经积累的组件是否需要使用新的框架技术重写，这是一个值得思考的问题。
              我们认为组件只是一种服务，那么对于其实现方式就无需纠结，譬如我们想在页面中添加一个日历控件，我只要看下这个日历控件
              的样式和功能是否满足我们的需求，至于其中的实现方式并不需要关心。但是随着业务的扩展，我们的日历控件不再满足业务的需要了
              我们可能需要对日历控件的源码进行修改，到这时候我们看到日历控件的源码是如此混乱以至于根本无法修改，我们可能需要去寻找
              其他日历控件，那之前的日历控件就会留在框架中但是对新的页面没有价值，而新的日历控件又要改变样式让其与之前的日历控件的样式
              尽量保持一致，之前我们对旧的日历控件的API的理解就意义不大了。
              我们在选择控件的时候要尽可能对其源码进行分析理解，尽量选择代码结构清晰，容易扩展的控件。当我们对控件有新的需求的时候，
              我们尽可能选择对已经存在的控件进行扩展，而不是根据个人喜好又去选择其他的开源控件。
            </p>
              <pre>
                <code>
                </code>
              </pre>
            </p>
          </section>
        </section>
      </article>
    </div>
    <div class="page__ft" style='display:none'>
      <a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>
    </div>
  </div></div>
